<style lang="scss" type="stylesheet/scss" scoped>
</style>

<template>
  <div class="as-option"
       :class="[{'is-hover':isHover,
                 'is-active':isActive},
                 size?'as-option--'+size:'']"
       @click="clickItem"
       @mouseenter="hoverItem">
    <slot v-if="$slots.default"></slot>
    <span v-else>{{label}}</span>
  </div>
</template>

<script type="text/ecmascript-6">
import emitter from "../../../mixin";
export default {
  name: "AsOption",
  mixins: [emitter],
  props: {
    value: {},
    label: {}
  },
  data() {
    return {
      isHover: false,
      isActive: false
    };
  },
  computed: {
    size() {
      let parent = this.$parent;
      while (parent) {
        let name = parent.$options.componentName;
        if (name === "AsSelectDropdown") {
          return parent.size;
        }

        parent = parent.$parent;
      }

      return "";
    }
  },
  mounted() {
    // 父级改变值后返回值
    this.$on("setValue", val => {
      if (val === this.value) {
        // 根据值返回当前值对应的 label
        this.dispatch("AsSelect", "returnLabel", this.label);
      }
      this.isActive = val === this.value;
    });
    // 接收改变 hover 的事件
    this.$on("changeHoverItem", val => {
      this.isHover = val === this.value;
    });
  },
  methods: {
    // hover 条目的时候发送一条数据给 select
    hoverItem() {
      this.dispatch("AsSelect", "hoverItem", [this.value]);
    },
    // 点击条目，发送改变 label 和 value 的事件
    clickItem() {
      this.dispatch("AsSelect", "clickItem", [this.value, this.label]);
    }
  }
};
</script>
